<template>
  <view class="empty-state" :style="containerStyle">
    <!-- 图标/图片 -->
    <view class="empty-icon" v-if="showIcon">
      <image 
        v-if="iconType === 'image'" 
        :src="iconSrc" 
        :style="iconStyle"
        mode="widthFix"
        class="icon-image"
      />
      <text 
        v-else-if="iconType === 'iconfont'" 
        :class="['iconfont-v2', iconClass]"
        :style="iconStyle"
        class="icon-font"
      />
      <text 
        v-else 
        :style="iconStyle"
        class="icon-text"
      >
        {{ iconText }}
      </text>
    </view>

    <!-- 标题 -->
    <text v-if="title" class="empty-title" :style="titleStyle">
      {{ title }}
    </text>

    <!-- 描述 -->
    <text v-if="description" class="empty-description" :style="descriptionStyle">
      {{ description }}
    </text>

    <!-- 操作按钮 -->
    <view v-if="showButton" class="empty-action">
      <button 
        :class="['empty-button', buttonClass]"
        :style="buttonStyle"
        @click="handleButtonClick"
      >
        {{ buttonText }}
      </button>
    </view>

    <!-- 自定义插槽 -->
    <view v-if="$slots.default" class="empty-slot">
      <slot />
    </view>
  </view>
</template>

<script>
/**
 * 通用空状态组件
 * @description 用于显示空数据状态的通用组件，支持多种图标类型和自定义样式
 * @author 系统
 * @date 2024
 */

export default {
  name: 'EmptyState',
  props: {
    // 图标类型: 'image' | 'iconfont' | 'text' | 'none'
    iconType: {
      type: String,
      default: 'image',
      validator: value => ['image', 'iconfont', 'text', 'none'].includes(value)
    },
    // 图片路径
    iconSrc: {
      type: String,
      default: '/static/images/nodata.png'
    },
    // iconfont 类名
    iconClass: {
      type: String,
      default: 'icon-kong'
    },
    // 文本图标
    iconText: {
      type: String,
      default: '😔'
    },
    // 是否显示图标
    showIcon: {
      type: Boolean,
      default: true
    },
    // 标题
    title: {
      type: String,
      default: '暂无数据'
    },
    // 描述
    description: {
      type: String,
      default: ''
    },
    // 是否显示按钮
    showButton: {
      type: Boolean,
      default: false
    },
    // 按钮文本
    buttonText: {
      type: String,
      default: '重新加载'
    },
    // 按钮类名
    buttonClass: {
      type: String,
      default: ''
    },
    // 容器样式
    containerStyle: {
      type: Object,
      default: () => ({})
    },
    // 图标样式
    iconStyle: {
      type: Object,
      default: () => ({})
    },
    // 标题样式
    titleStyle: {
      type: Object,
      default: () => ({})
    },
    // 描述样式
    descriptionStyle: {
      type: Object,
      default: () => ({})
    },
    // 按钮样式
    buttonStyle: {
      type: Object,
      default: () => ({})
    },
    // 预设类型
    type: {
      type: String,
      default: 'default',
      validator: value => ['default', 'network', 'search', 'message', 'order'].includes(value)
    }
  },
  computed: {
    // 根据类型设置默认配置
    defaultConfig() {
      const configs = {
        default: {
          iconType: 'image',
          iconSrc: '/static/images/nodata.png',
          title: '暂无数据',
          description: '当前没有相关数据'
        },
        network: {
          iconType: 'iconfont',
          iconClass: 'icon-wangluo',
          title: '网络异常',
          description: '请检查网络连接后重试',
          showButton: true,
          buttonText: '重新加载'
        },
        search: {
          iconType: 'iconfont',
          iconClass: 'icon-sousuo',
          title: '未找到相关内容',
          description: '请尝试其他关键词搜索'
        },
        message: {
          iconType: 'iconfont',
          iconClass: 'icon-xiaoxi',
          title: '暂无消息',
          description: '您还没有收到任何消息'
        },
        order: {
          iconType: 'iconfont',
          iconClass: 'icon-dingdan',
          title: '暂无订单',
          description: '您还没有任何订单记录'
        }
      }
      return configs[this.type] || configs.default
    }
  },
  methods: {
    handleButtonClick() {
      this.$emit('button-click')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  min-height: 400rpx;

  .empty-icon {
    margin-bottom: 40rpx;

    .icon-image {
      width: 280rpx;
      height: 280rpx;
    }

    .icon-font {
      font-size: 120rpx;
      color: #c0c4cc;
    }

    .icon-text {
      font-size: 120rpx;
    }
  }

  .empty-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .empty-description {
    font-size: 28rpx;
    color: #999;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 40rpx;
  }

  .empty-action {
    .empty-button {
      background: #ED6567;
      color: white;
      border: none;
      border-radius: 44rpx;
      padding: 24rpx 48rpx;
      font-size: 28rpx;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #d55a54;
      }

      &:active {
        transform: scale(0.98);
      }
    }
  }

  .empty-slot {
    margin-top: 40rpx;
  }
}

// 预设样式变体
.empty-state {
  &--compact {
    padding: 40rpx 20rpx;
    min-height: 200rpx;

    .empty-icon {
      margin-bottom: 20rpx;

      .icon-image {
        width: 140rpx;
        height: 140rpx;
      }

      .icon-font {
        font-size: 60rpx;
      }
    }

    .empty-title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .empty-description {
      font-size: 24rpx;
      margin-bottom: 20rpx;
    }
  }

  &--large {
    padding: 120rpx 60rpx;
    min-height: 600rpx;

    .empty-icon {
      margin-bottom: 60rpx;

      .icon-image {
        width: 400rpx;
        height: 400rpx;
      }

      .icon-font {
        font-size: 160rpx;
      }
    }

    .empty-title {
      font-size: 36rpx;
      margin-bottom: 30rpx;
    }

    .empty-description {
      font-size: 32rpx;
      margin-bottom: 60rpx;
    }
  }
}
</style>
